<template>
    <div class="device">
        <div class="headWrapper">
            <label class="el-form-item-label">设备名称</label>
            <el-input v-model.trim="query.deviceName" clearable placeholder="设备名称" style="width: 185px;"
                      class="filter-item"/>
            <label class="el-form-item-label">单位编号</label>
            <el-input v-model.trim="query.userCode" clearable placeholder="单位编号" style="width: 185px;"
                      class="filter-item"/>
            <!--            <label class="el-form-item-label">产品序列号</label>-->
            <!--            <el-input v-model.trim="query.productSn" clearable placeholder="产品序列号" style="width: 185px;"-->
            <!--                      class="filter-item"/>-->
            <el-button class="filter-item" type="primary" @click="search(query.deviceName)">查询</el-button>
            <el-dialog :close-on-click-modal="false" :visible.sync="isShow" :title="isEdit ? '编辑设备' : '创建设备'"
                       width="600px" destroy-on-close>
                <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
                    <el-form-item label="设备名称:" prop="name">
                        <el-input v-model="form.name" style="width: 370px;" clearable/>
                    </el-form-item>
                    <el-form-item label="单位编号:" prop="userCode">
                        <el-input v-model="form.userCode" style="width: 370px;" clearable/>
                    </el-form-item>
                    <!--                    <el-form-item label="型号:">-->
                    <!--                        <el-select v-model="form.model">-->
                    <!--                            <el-option v-for="item in modelList" :key="item.id" :label="item.label"-->
                    <!--                                       :value="item.value"/>-->
                    <!--                        </el-select>-->
                    <!--                    </el-form-item>-->
                    <el-form-item label="产品序列号" prop="productSn">
                        <el-input v-model="form.productSn" style="width: 370px;" clearable/>
                    </el-form-item>
                    <el-form-item label="飞控序列号" prop="remoteSn">
                        <el-input v-model="form.remoteSn" style="width: 370px;" clearable/>
                    </el-form-item>
                    <el-form-item label="设备编号:">
                        <el-input v-model="form.id" style="width: 370px;" :readonly="true" disabled/>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="text" @click="onCancelled">取消</el-button>
                    <el-button type="primary" @click="formEditInfo">确认</el-button>
                </div>
            </el-dialog>
        </div>
        <el-table
                v-loading="loading"
                :data="tableData"
                style="width: 100%"
        >
            <el-table-column prop="id" label="设备编号" align="center"/>
            <el-table-column prop="userCode" label="单位编号" align="center"/>
            <el-table-column prop="name" label="设备名称" align="center"/>
            <el-table-column prop="model" label="设备型号" align="center">
                <template slot-scope="scope">
                    {{ modelList[scope.row.model].label }}
                </template>
            </el-table-column>
            <!--            <el-table-column prop="model" label="型号" align="center"/>-->
            <el-table-column prop="productSn" label="产品序列号" align="center"/>
            <el-table-column prop="remoteSn" label="飞控序列号" align="center"/>
            <el-table-column prop="createTime" label="注册时间" align="center"/>
            <el-table-column label="操作" width="200" align="center" prop="userId">
                <template slot-scope="scope">
                    <el-button type="primary" @click="onEdited(scope.row.id)">编辑</el-button>
                    <el-button type="danger" @click="onDeleted(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :current-page="query.page"
                :page-size="10"
                layout="prev, pager, next, jumper"
                :total="totalElement"
                @current-change="handleCurrentChange"
        />
    </div>
</template>

<script>
	import {
		addDeviceInfo,
		deleteDeviceById,
		editDeviceInfo,
		getDeviceDetailInfo,
		getDeviceModelList,
		getQueryList
	} from '@/api/device'

	export default {
		name: 'Device',
		data() {
			return {
				query: {
					deviceName: '',
					page: 0,
					size: 10,
					userCode: '',
					productSn: ''
				},
				loading: false,
				rules: {
					name: [
						{required: true, message: '用户名必填', trigger: 'blur'}
					],
					userCode: [
						{required: true, message: '单位编码必填', trigger: 'blur'}
					],
					productSn: [
						{required: true, message: '产品序列号必填', trigger: 'blur'}
					],
					id: [
						{required: true, message: '用户名必填', trigger: 'blur'}
					],
					remoteSn: [
						{required: true, message: '飞控序列号必填', trigger: 'blur'}
					]
				},
				form: {
					id: '',
					name: '',
					model: '',
					productSn: '',
					remoteSn: '',
					userCode: ''
				},
				tableData: [],
				modelList: [],
				totalElement: 0,
				isShow: false,
				isEdit: false
			}
		},
		mounted() {
			this.getDroneModelList()
			this.getUserDataList()
		},
		methods: {
			// 搜索
			search(deviceName) {
				// this.query.page = 1
				this.query.deviceName = deviceName
				this.getUserDataList()
				this.getDroneModelList()
			},
			async getUserDataList() {
				this.loading = true
				const {page, deviceName: name, size, userCode} = this.query
				try {
					const res = await getQueryList({page, name, size, userCode})
					this.totalElement = res.totalElements
					this.tableData = res.content.map(i => {
						const name = i.name ? i.name : '未知'
						return {...i, name}
					})
					this.loading = false
					console.log('getUserDataList')
					console.log(res)
				} catch (e) {
					this.loading = false
					console.log(e)
				}
			},
			formEditInfo() {
				if (this.isEdit) {
					this.$refs['form'].validate(valid => {
						if (valid) {
							this.editUserInfo()
						}
					})
				} else {
					// 新增数据
					this.$refs['form'].validate(valid => {
						if (valid) {
							this.addUserInfo()
						}
					})
				}
			},
			async addUserInfo() {
				try {
					await addDeviceInfo({
						id: this.form.id,
						model: this.form.model,
						name: this.form.name,
						productSn: this.form.productSn,
						remoteSn: this.form.remoteSn
					})
					this.$message.success('新增设备成功')
					this.query.page = 0
					this.isShow = false
					await this.getUserDataList()
				} catch (e) {
					console.log(e)
				}
			},
			async editUserInfo() {
				const {id, model, name, productSn, remoteSn, userCode} = this.form
				try {
					await editDeviceInfo({
						id,
						model,
						name,
						productSn,
						remoteSn,
						userCode,
					})
					this.$message.success('修改成功')
					this.isShow = false
					await this.getUserDataList()
				} catch (e) {
					console.log(e)
				}
			},
			onCancelled() {
				this.isShow = false
			},
			async onEdited(id) {
				this.isShow = true
				this.isEdit = true
				try {
					const res = await getDeviceDetailInfo({id})
					this.form.id = res.id
					this.form.name = res.name
					this.form.model = res.model
					this.form.remoteSn = res.remoteSn
					this.form.productSn = res.productSn
					this.form.userCode = res.userCode
					console.log(res)
				} catch (e) {
					console.log(e)
				}
			},
			onDeleted(model) {
				this.$messageBox.confirm(`此操作将永久删除${model.name}, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteUser(model.id)
				}).catch(() => {
					return false
				})
			},
			async deleteUser(id) {
				try {
					await deleteDeviceById({id})
					this.$message.success('删除成功')
					this.getUserDataList()
				} catch (e) {
					console.log(e)
				}
			},
			async handleCurrentChange(e) {
				this.query.page = e // 修改页码
				await this.getUserDataList()
			},
			async getDroneModelList() {
				try {
					const res = await getDeviceModelList()
					console.log('getDroneModelList')
					console.log(res)
					this.modelList = res
					console.log(res)
				} catch (e) {
					console.log(e)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
    @import "src/style/flyer";
</style>
